<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		
			.box div{
				margin: 150px auto;
				position: relative;
				width: 200px;
				height: 200px;
				background-color: #000000;
				/*把背景改成黑色更有那味*/
			}
			
			.box span{
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
				/*初始化透明，防止无限次过度时出现倒转效果（阿毛也说不清，就算是重置吧）*/
				
		
			}
			
		.box span:after{
			content: "";
			display: block;
			position: absolute;
			left: 50px;
			top: 50px;
			width: 8px;
			height: 8px;
			background:white;
			border-radius: 50%;
		}	
			
			.box span:nth-child(1){
				-webkit-animation:tran1 6s 0.2s infinite;}/*使用复合属性*/
			.box span:nth-child(2){
				-webkit-animation:tran2 6s 0.4s infinite;	}
			.box span:nth-child(3){
				-webkit-animation:tran3 6s 0.6s infinite;}
			 .box span:nth-child(4){
				-webkit-animation:tran4 6s 0.85s infinite;}
			.box span:nth-child(5){
				-webkit-animation:tran5 6s 1.05s infinite;}
			.box span:nth-child(6){
				-webkit-animation:tran6 6s 1.25s infinite;}	
				
				
				
			
	
				
				
				
				
			@-webkit-keyframes tran1{
				0%{
					transform: rotate(240deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.29, 0.5, 0.32, 0.74);/*贝塞尔速度曲线*/
				}
				7%{
					transform: rotate(325deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				30%{
					transform: rotate(450deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
				}
				39%{
					transform: rotate(650deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				60%{
					transform: rotate(800deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
				}
				65%{
					transform: rotate(940deg);
					opacity: 1;
					animation-timing-function: ease-in;
				}
				69%{
					transform: rotate(950deg);
					opacity: 0;
				}
			}
			
			
			@-webkit-keyframes tran2{
				0%{
					transform: rotate(250deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.29, 0.5, 0.32, 0.74);
				}
				7%{
					transform: rotate(325deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				30%{
					transform: rotate(450deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
				}
				39%{
					transform: rotate(650deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				60%{
					transform: rotate(800deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
				}
				65%{
					transform: rotate(930deg);
					opacity: 1;
					animation-timing-function: ease-in;
				}
				69%{
					transform: rotate(940deg);
					opacity: 0;
				}
			}
			
			@-webkit-keyframes tran3{
				0%{
					transform: rotate(260deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.29, 0.5, 0.32, 0.74);
				}
				7%{
					transform: rotate(325deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				30%{
					transform: rotate(450deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
				}
				39%{
					transform: rotate(650deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				60%{
					transform: rotate(800deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
				}
				65%{
					transform: rotate(920deg);
					opacity: 1;
					animation-timing-function: ease-in;
				}
				69%{
					transform: rotate(930deg);
					opacity: 0;
				}
				}
			
			@-webkit-keyframes tran4{
				0%{
					transform: rotate(270deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.29, 0.5, 0.32, 0.74);
				}
				7%{
					transform: rotate(325deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				30%{
					transform: rotate(450deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
				}
				39%{
					transform: rotate(650deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				60%{
					transform: rotate(800deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
				}
				65%{
					transform: rotate(910deg);
					opacity: 1;
					animation-timing-function: ease-in;
				}
				69%{
					transform: rotate(920deg);
					opacity: 0;
				}
				}
				
				
				@-webkit-keyframes tran5{
				0%{
					transform: rotate(280deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.29, 0.5, 0.32, 0.74);
				}
				7%{
					transform: rotate(325deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				30%{
					transform: rotate(450deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
				}
				39%{
					transform: rotate(650deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				60%{
					transform: rotate(800deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
				}
				65%{
					transform: rotate(900deg);
					opacity: 1;
					animation-timing-function: ease-in;
				}
				69%{
					transform: rotate(910deg);
					opacity: 0;
				}
				}
				@-webkit-keyframes tran6{
				0%{
					transform: rotate(290deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.29, 0.5, 0.32, 0.74);
				}
				7%{
					transform: rotate(325deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				30%{
					transform: rotate(450deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
				}
				39%{
					transform: rotate(650deg);
					opacity: 1;
					animation-timing-function: linear;
				}
				60%{
					transform: rotate(800deg);
					opacity: 1;
					animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
				}
				65%{
					transform: rotate(880deg);
					opacity: 1;
					animation-timing-function: ease-in;
				}
				69%{
					transform: rotate(900deg);
					opacity: 0;
				}
				}
	
			
			
			
			
		</style>
	</head>
	<body>
		
		<div class="box">
			<div>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>	
			</div>	
			
		</div>
	</body>
</html>
